<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>  </title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .parent{
            border:1px solid red;
            /* height: 300px; */ /*解决父元素塌陷问题2* 不能自适应子元素/
            /* overflow: hidden; */  /*解决父元素塌陷问题3 子元素自适应  但下拉框会裁剪*/
        }

        .parent::after{
            content: '';
            display: block;
            clear: both;
        }/*解决父元素塌陷问题最有效的方式*/
        .c1{
            float: left;
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .c2{
            float: right;
            width: 200px;
            height: 300px;
            background-color: blue;
        }

        .c3{
            clear: both;
        }/*解决父元素塌陷问题1*  得另加div 会显得代码臃肿*/

        .test::before{
            content: "女士";
        }

        .test::after{
            content: "么？";
        }         /*一个冒号伪类元素 两个冒号伪元素*/
    </style>
</head>
<body>
    <div class="parent">
        <div class="c1"></div>
        <div class="c2"></div>
        <!-- <div class="c3"></div> -->
    </div>
    <h2>测试</h2>
    <span class="test">你好</span>
</body>
</html>